<template>
  <div class="about">
    <button @click="testClk">点击</button>
    <router-view></router-view>

    <!-- <button class="a" :class="true?a:b">按钮</button> -->
    <!-- <button :style="colo">ad</button> -->
    <!-- <button :style="[c,d]">ad</button> -->
    <!-- {{Clk()}}--{{numBer}} -->
    <!-- {{num}}--{{numBer}}
    <button @click="Clk">dian</button>-->
    <!-- <Chacao :val="1" /> -->
    <!-- <input type="text" v-model="test"  />--{{test}} -->
    <!-- <input type="checkbox" v-model="hobbies" :value="1" />1
    <input type="checkbox" v-model="hobbies" :value="2" />2
    <input type="checkbox" v-model="hobbies" :value="3" />3
    <input type="checkbox" v-model="hobbies" :value="4" />
    4--{{hobbies}}-->
    <!-- <input type="radio" name="a" v-model="gender" value="男" />nan
    <input type="radio" name="a" v-model="gender" value="女" />
    nv--{{gender}}-->
    <!-- <Chacao>
       <div>
        1212
      </div>
      <template #a1="{nm}">
      <template slot="a1" slot-scope="{nm}">
        <div>{{nm}}</div>
      </template>
      <template v-slot:a2="{nm}">
        <div>{{nm}}</div>
      </template>
    </Chacao>-->
    <!-- <input v-if="is" type="text" v-focus:aaa.b="8888+1" v-model="test" />
    <button @click="Clk">dinaji</button>-->
    <!-- {{filterTest|fliterFn}}--
    {{filterTestA|fliterFnA}}-->
    <!-- <div ref="div1" @click="Clk">hahaha</div> -->
    <!-- <input type="text" v-model="num" />
    <Chacao v-if="is" />
    <button @click="Clk">1221</button>-->

    <!-- <ul>
      <li v-for="(v,i) in newArr" :key="i">{{v}}</li>
    </ul>
    <button @click="Clk">点击</button>-->
    <!-- <input type="text" v-model="num" /> -->
    <!-- <input type="checkbox" v-model="hobbies" :value="1" />1
    <input type="checkbox" v-model="hobbies" :value="2" />2
    <input type="checkbox" v-model="hobbies" :value="3" />3
    <input type="checkbox" v-model="hobbies" :value="4" />4-->
    <!-- <input type="text" v-model="obj.a" /> -->
    <!-- {{ this.nameBug }} -->
  </div>
</template>

<script>
import Mixin from "../util/mixin";
import Chacao from "../components/Chacao";
export default {
  data() {
    return {
      newArr: [1, 2, 3, 4],
      isTrue: true,
      a: "a1",
      b: "b1",
      colo: {
        color: "red",
        background: "yellow",
      },
      c: {
        color: "red",
      },
      d: {
        background: "blue",
      },
      num: 10,
      name: "zn",
      obj: {
        a: 1,
        b: 2,
      },
      test: 12,
      hobbies: [],
      gender: "",
      is: true,
      filterTest: "zn",
      filterTestA: "wn",
      newObj: {
        a: 1,
        b: 2,
      },
    };
  },
  /* beforeCreate() {
    // console.log(this.num);//undefinde
    console.log("beforeCreate");
  },
  created() {
    // console.log(this.num);
    console.log("created");
  },
  beforeMount() {
    // console.log(this.num);
    console.log("beforeMount");
  },
  mounted() {
    // console.log(this.num);
    console.log("mounted");
  },
  //更新调用
  beforeUpdate() {
    // console.log(this.num);
    console.log("beforeUpdate");
  },
  updated() {
    console.log("Update");
  }, */
  methods: {
    testClk() {
      this.$router.push('/routerParent/routerChild')
      // this.$router.push({ path: "/routerTest/457" });
      // this.$router.push({ path: "/routerTest", query: { q: 829 } });
      // this.$router.push({ name: "routerTest", params: { msg: "zn" } });
    },
    Clk() {
      // console.log(this.newArr);
      // this.newArr.pop();
      // console.log(this.newArr);
      let a = this.newArr.filter((v) => {
        return v > 2;
      });
      // console.log(a);

      // this.is = false;
      // console.log(this.$refs.div1);
      // return this.num++;
    },
  },
  watch: {
    /* "newObj.a": {
      handler(newVal, oldVal) {
        console.log(newVal);
        console.log(oldVal);
      },
      deep: true,
      immediate: true,
    }, */
    /* newObj: {
      handler(newVal, oldVal) {
        console.log(newVal);
        console.log(oldVal);
      },
      deep: true,
      immediate: true,
    }, */
    /* num(newVal, oldVal) {
      console.log(newVal);
      console.log(oldVal);
    }, */
  },
  computed: {
    numBer() {
      return this.num + 10;
    },
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
      update(el, binding, oldValue) {
        console.log(binding);
      },
      bind() {
        console.log(1);
      },
      unbind() {
        console.log(2);
      },
    },
  },
  filters: {
    fliterFn(v) {
      return v + "829";
    },
  },
  components: {
    Chacao,
  },
  mixins: [Mixin],
};
</script>

<style scoped></style>
